<template>
	
	<view class="all">
		<custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list">
			<!-- #ifdef MP-WEIXIN -->
			<view class="item" v-for="(item, index) in data.list" :key="index" slot="slot{{ index }}">
				<!--    <view class="image-container">
          <image :src="item.image" class="item-image" />
        </view> -->
		<view>{{itemIndex2}}</view>
				<view class="title">{{ item.title }}</view>
				<view class="desc">{{ itemIndex1 }}</view>

			</view>
			<!-- #endif -->

			<!-- #ifndef MP-WEIXIN -->
			<template v-slot:default="item">
				<view class="item">
					<view class="image-container">
						<image :src="item.image" class="item-image" />
					</view>
					<view class="title">{{ item.title }}</view>
					<view class="desc">{{ item.desc }}</view>
				</view>
			</template>
			<!-- #endif -->
		</custom-waterfalls-flow>
	</view>
	
</template>
<script>
	// import grid from '/components/grid/grid.vue'
	export default {
		props: ['itemIndex1'],
		data() {
			return {
				itemIndex2:this.itemIndex1,
				data: {

					list: [
						{
							image: '/static/restaurant/OIP-C.jpg',
							title: '六原菜馆',
							desc: '通通六元,经济实惠好吃不贵'
						},
						{
							image: '/static/restaurant/OIP-C2.jpg',
							title: '六原菜馆',
							desc: '通通六元,经济实惠好吃不贵'
						},
						{
							image: '/static/restaurant/OIP-C3.jpg',
							title: '六原菜馆',
							desc: '通通六元,经济实惠好吃不贵'
						},
						{
							image: '/static/restaurant/OIP-C4.jpg',
							title: '六原菜馆',
							desc: '通通六元,经济实惠好吃不贵'
						},
						{
							image: '/static/restaurant/OIP-C5.jpg',
							title: '我是标题5',
							desc: '描述描述描述描述描述描述描述描述5'
						},
						{
							image: '/static/restaurant/OIP-C6.jpg',
							title: '我是标题6',
							desc: '描述描述描述描述描述描述描述描述6'
						},
						{
							image: '/static/restaurant/OIP-C7.jpg',
							title: '我是标题7',
							desc: '描述描述描述描述描述描述描述描述7'
						},
						{
							image: '/static/restaurant/OIP-C6.jpg',
							title: '我是标题8',
							desc: '描述描述描述描述描述描述描述描述8'
						},
						{
							image: '/static/restaurant/OIP-C5.jpg',
							title: '我是标题9',
							desc: '描述描述描述描述描述描述描述描述9'
						},
						{
							image: '/static/restaurant/OIP-C4.jpg',
							title: '我是标题10',
							desc: '描述描述描述描述描述描述描述描述10'
						},
						{
							image: '/static/restaurant/OIP-C3.jpg',
							title: '我是标题11',
							desc: '描述描述描述描述描述描述描述描述11'
						},
						{
							image: '/static/restaurant/OIP-C2.jpg',
							title: '我是标题12',
							desc: '描述描述描述描述描述描述描述描述12'
						},
					],
				},
			};
		},
		methods: {
			reset() {
				this.data.list = [{
					image: 'https://via.placeholder.com/200x500.png/ff0000',
					title: '我是标题1',
					desc: '描述描述描述描述描述描述描述描述1',
				}];
				this.$refs.waterfallsFlowRef.refresh();
			}
		}
		// ,
		// components: {
		// 	grid
		// },
		// created() {
		// 	// 监听
		// 	uni.$on('aEven', data => {
		// 		console.log('grid组件传来的数据：', data)
		// 		this.itemIndex1 = data
		// 	})
		// }
	}
</script>
<style scoped lang="scss">
	.all {
		padding: 20rpx; // 内边距为20rpx
		background-color: #f4f4f4; // 背景颜色为浅灰色
	}

	.item {
		background: #fff; // 背景颜色为白色
		border-radius: 16rpx; // 边框圆角为16rpx
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 阴影效果，水平偏移0，垂直偏移4px，模糊半径8px，颜色为透明度为0.1的黑色
		margin-bottom: 20rpx; // 下外边距为20rpx
		padding: 12rpx; // 内边距为12rpx
		transition: transform 0.3s ease, box-shadow 0.3s ease; // 动画过渡效果，针对transform和box-shadow属性，持续时间为0.3秒，缓动效果为ease
		display: flex; // 设置为弹性布局
		flex-direction: column; // 弹性布局方向为垂直方向
		justify-content: space-between; // 弹性盒子内部元素垂直方向上的对齐方式为两端对齐

		&:hover {
			// 鼠标悬停时的样式
			transform: translateY(-4rpx); // 垂直向上移动4rpx
			box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); // 阴影效果增强，垂直偏移8px，模糊半径16px，颜色为透明度为0.15的黑色
		}

		.image-container {
			width: 100%; // 宽度为父元素的100%
			height: 200rpx; // 高度为200rpx
			overflow: hidden; // 溢出部分隐藏
			border-radius: 12rpx; // 边框圆角为12rpx
			margin-bottom: 12rpx; // 下外边距为12rpx
			display: flex; // 设置为弹性布局
			justify-content: center; // 弹性盒子内部元素水平方向上的对齐方式为居中
			align-items: center; // 弹性盒子内部元素垂直方向上的对齐方式为居中
			background-color: #f0f0f0; // 背景颜色为浅灰色
		}

		.item-image {
			width: 100%; // 宽度为父元素的100%
			height: 100%; // 高度为父元素的100%
			object-fit: cover; // 图片保持其宽高比，但完全覆盖容器
		}

		.title {
			font-size: 28rpx; // 字体大小为28rpx
			font-weight: bold; // 字体加粗
			color: #333; // 字体颜色为深灰色
			margin-bottom: 10rpx; // 下外边距为10rpx
		}

		.desc {
			font-size: 24rpx; // 字体大小为24rpx
			color: #666; // 字体颜色为灰色
			line-height: 1.5; // 行高为1.5倍字体大小
			overflow: hidden; // 溢出部分隐藏
			text-overflow: ellipsis; // 文本溢出时显示省略号
			white-space: nowrap; // 文本不换行 // 保证过长的描述不会溢出
		}
	}
</style>